<template>
  <navBar :title="'计算器'"></navBar>
  <main class="test-vw">
    <div>
      输出---：
      <span v-show="fitstNumIsshow">{{ inputNum }} </span>
      <!-- <span v-show="!fitstNumIsshow">{{ inputNum }} </span> -->
    </div>
    <div class="main_box">
      <div class="left_box">
        <div class="num_box" v-for="item in numList" @click="numListClick(item)">{{ item }}</div>
      </div>
      <div class="right_box">
        <div @click="reStart">AC</div>
        <div v-for="item in numsymbol" @click="numsyClick(item)">{{ item }}</div>
      </div>
    </div>
  </main>
</template>
<script setup lang="ts">
import navBar from './components/navBar.vue' //vue3的父子组件传值
import { useRouter, useRoute } from 'vue-router'
import { ref, computed, reactive } from 'vue'
const router = useRouter() //路由跳转等方法
const route = useRoute() //用来获取路由传值等参数
console.log(route.query, '333')
const numList = reactive(['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']) //数字键盘
const numsymbol = reactive(['+', '-', '*', '/', '=']) //加减乘除
let inputNum = ref(0) //输入的字母数字
let fitstNumIsshow = ref(true)
let firstNum = ref(0) //输入的第一个数字
let reCordStr = ref('') //记录用户输入的加减乘除
const numListClick = (num: any) => {
  fitstNumIsshow.value = true
  inputNum.value = Number(inputNum.value + String(num))
}
const numsyClick = (symbleNum: any) => {
  if (symbleNum === '=') {
    if (reCordStr.value === '+') {
      inputNum.value = firstNum.value + inputNum.value
    } else if (reCordStr.value === '-') {
      inputNum.value = firstNum.value - inputNum.value
    } else if (reCordStr.value === '*') {
      inputNum.value = firstNum.value * inputNum.value
    } else if (reCordStr.value === '/') {
      inputNum.value = firstNum.value / inputNum.value
    }
  } else {
    fitstNumIsshow.value = false
    firstNum.value = inputNum.value //把输入的第一个数字赋值
    inputNum.value = 0
    reCordStr.value = symbleNum
  }
}
const reStart = () => {
  inputNum.value = 0
  fitstNumIsshow.value = true
  firstNum.value = 0
}
</script>
<style scoped>
.test-vw {
  width: 375px;
  height: 100vh;
  padding: 0 0 60px 0;
  font-size: 22px;
  text-align: center;
  line-height: 100px;
  text-align: left;
  overflow: hidden;
  .main_box {
    display: flex;
    flex-direction: row;
    height: 100%;
    .left_box {
      width: 70%;
      overflow: hidden;
      .num_box {
        float: left;
        width: 29%;
        padding-bottom: 31%;
        margin-right: 10px;
        margin-bottom: 10px;
        background-color: rgb(214, 236, 169);
        height: 20px;
        text-align: center;
        border: 1px solid #333;
      }
    }
    .right_box {
      width: 30%;

      overflow: hidden;
      div {
        background-color: #abac99;
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
</style>
